<template>
  <div class='page-container'>
    <h2>路由</h2>

    <el-button @click="goToPermission1">跳转到按钮权限name&params</el-button>
    <el-button @click="goToPermission2">跳转到按钮权限name&query</el-button>
    <el-button @click="goToPermission3">跳转到按钮权限path&query</el-button>
    <el-button @click="goToPermission4" type="danger">跳转到按钮权限path&params</el-button>

  </div>
</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import { reactive, ref } from 'vue';
import { useRouter, useRoute, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
const router = useRouter();
const route = useRoute();
/**
 * 数据
 */
const state = reactive({});
/**
 * 功能方法
 */
function goToPermission1() {

  // name params  am  am
  //  path      query


  // this.$router.push   在2022年8月更新之后也不能用了
  router.push({ name: "ButtonPermission", params: { price: 36.9 } })
}
function goToPermission2() {
  // this.$router.push
  router.push({ name: "ButtonPermission", query: { price: 36.9 } })
}
function goToPermission3() {
  // this.$router.push
  router.push({ path: "/studyVue3/buttonPermission", query: { price: 36.9 } })
}
function goToPermission4() {
  // this.$router.push
  router.push({ path: "/studyVue3/buttonPermission", params: { price: 36.9 } })
}
// onBeforeRouteEnter((to, from, next) => {

// })
onBeforeRouteUpdate(() => {

})
onBeforeRouteLeave(() => { })
</script>
<style lang='scss' scoped>
.page-container {}
</style>